<template>
	<div class="in-form-attributes">
		<div class="content">
			<el-form class="form" label-position="top">
				<el-form-item label="运行模式">
					<el-radio-group v-model="formData.attribute.mode">
						<el-radio value="designer">设计模块</el-radio>
						<el-radio value="operate">运行模式</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="表单标题">
					<el-input v-model="formData.attribute.title"></el-input>
				</el-form-item>
				<el-form-item label="表单宽度">
					<el-input-number v-model="formData.attribute.width" :min="600" :max="9999" />
				</el-form-item>
				<el-form-item label="标签对齐方式">
					<div class="form-position">
						<el-radio-group v-model="formData.attribute.labelPosition" size="default">
							<el-radio-button value="left">左对齐</el-radio-button>
							<el-radio-button value="right">右对齐</el-radio-button>
							<el-radio-button value="top">顶部对齐</el-radio-button>
						</el-radio-group>
					</div>
				</el-form-item>
				<el-form-item label="标签宽度">
					<el-input-number v-model="formData.attribute.labelWidth" :min="1" :max="1000" />
				</el-form-item>
				<el-form-item label="水印">
					<el-radio-group v-model="formData.attribute.watermark">
						<el-radio :value="true">启用</el-radio>
						<el-radio :value="false">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
const formData = defineModel();
</script>
<style>
.form-position {
	.ep-radio-button__inner {
		padding: 8px 20px;
	}
}
</style>